<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="page postOffer">
      <xlNavBar :isShare="isShare" title="发布招聘需求" bgc="ff9d49" :customJump="customJump"></xlNavBar>
      <div class="container">
        <div class="form_item">
          <xlCell text="招聘岗位" tag="（必填）" @click="clickRightQiuZhiJob">
            <template v-slot:right>
              <div class="form-item-right-qiuzhi">请选择</div>
            </template>
            <template v-slot:bottom>
              <div class="form-item-bottom-qiuzhi" v-if="wantJobList">
                <div class="tag" v-for="(item, index) in wantJobList" :key="item['name']">
                  {{ item["name"] }}
                  <i class="iconfont cyguanbixiao" @click="deleteTagJob(index)"></i>
                </div>
              </div>
            </template>
          </xlCell>
        </div>
        <div class="form_item">
          <xlCell text="工作地址" tag="（必填）" @click="clickSelectCity">
            <template v-slot:right>
              <div class="form-item-right-city">{{ addressText }}</div>
            </template>
          </xlCell>
        </div>
        <div class="form_item">
          <xlCell text="联系电话" tag="（必填）">
            <template v-slot:right>
              <div class="form-item-right-input">
                <input type="number" v-model="postParams.contact" @change="changePhone" @blur="changePhone" name="phone" id="userName" placeholder="手机号码" />
              </div>
            </template>
          </xlCell>
        </div>

        <div class="form_item">
          <xlCell rightIcon="" text="需求描述" tag="（必填）">
            <template v-slot:right>
              <div class="form-item-right-btn" @click="getTemplate">自动生成</div>
            </template>
            <template v-slot:bottom>
              <div class="form-item-right-desc area">
                <textarea
                  id="xuqiuTextArea"
                  v-model="postParams.description"
                  placeholder="请输入或粘贴您的招聘岗位描述，让求职者快速了解岗位，如：招聘职位、主营菜系、月薪多少、月休几天、宿舍环境、福利等，越详细招人越快。"
                  placeholder-class="textarea-placeholder"
                  @input="xuqiuChange"
                  :maxlength="xuqiuMaxTextNum"
                />
                <text class="text">{{ `${postParams.description.split("").length || 0}/${xuqiuMaxTextNum}` }}</text>
              </div>
            </template>
          </xlCell>
        </div>
        <div class="form_item form-bottom">
          <xlCell rightIcon="" text="上传图片" tag="（选填）" :tagtype="1" @click="clickRightQiuZhi">
            <template v-slot:bottom>
              <div class="form-item-right-upload">
                <div class="title2">上传图片，更好的展示自己，最多支持上传4张图片</div>
                <div class="image_list">
                  <div class="item" v-for="(item, index) in picture_url" :key="item">
                    <image :src="item" mode="scaleToFill" />
                    <div class="deletePic" @click="deletePic(index)">
                      <text class="iconfont cyguanbi"></text>
                    </div>
                  </div>
                  <u-upload
                    :previewImage="false"
                    width="74px"
                    height="74px"
                    :fileList="fileList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="1"
                    :multiple="true"
                    :maxCount="4"
                  >
                    <image src="@/static/images/common/upload.png" mode="widthFix" style="width: 76px; height: 76px"></image>
                  </u-upload>
                </div>
              </div>
            </template>
          </xlCell>
        </div>
      </div>
      <div class="btn_wrap">
        <div class="text">
          <span class="s1">发布招聘信息即表示遵守</span>
          <span class="s2" @click="$togo('/pages3/userAgreement', { type: 'job' })">《餐饮信息网信息发布规则》</span>
          <span class="s1">，如果违反规则可能导致您的账号异常</span>
        </div>
        <div class="submit" :class="[isFabu ? 'isLight' : '']" @click="submit">立即发布</div>
      </div>
      <u-popup top="200" :show="issueAddPopup" bgColor="transparent" mode="center" round="10px">
        <view class="issuePopup">
          <div class="title">
            <i class="iconfont"></i>
            <text>发布成功</text>
          </div>
          <div class="h1">审核通过后将在招聘列表展示</div>
          <div class="st">如果您着急招人，可以点击置顶招聘来提高曝光量~</div>
          <div class="jjqz" @click="tozp">置顶招聘</div>
          <div class="desc">系统已根据您的需求为您精准推荐人才</div>
          <div class="ckgw" @click="toFindWork">查看求职者</div>
        </view>
        <image @click="regulateJob" class="close" src="@/static/images/common/close.png" mode="scaleToFill" />
      </u-popup>
      <u-popup top="200" :show="issueEditPopup" bgColor="transparent" mode="center" round="10px">
        <view class="issuePopup issueEditPopup">
          <image class="image" src="./static/images/6.png" mode="scaleToFill" />
          <div class="name">审核通过后将在列表展示</div>
          <image class="icon" src="./static/images/7.png" mode="scaleToFill" />
          <div class="jjqz" @click="regulateJob">我知道了</div>
        </view>
      </u-popup>
      <selectAddressPopup
        v-if="showselectAddressPopup"
        :info="postParams"
        @getAddress="getAddress"
        :show="showselectAddressPopup"
        @close="showselectAddressPopup = false"
      ></selectAddressPopup>
      <selectCityPopup @close="showCityPopup = false" ref="selectCityPopup" type="select" :max="3" :show="showCityPopup" @getData="getSelectAddress"></selectCityPopup>
      <selectJobPopup :activeList="jobActiveList" title="请选择招聘岗位" toast="最多选择三个招聘岗位" :show="showJobPopup" @submit="submitJob"></selectJobPopup>
      <phoneCode ref="phoneCode" :show="showCodePopup" :phone="postParams.contact" @success="codeSuccess" @cancel="cancelCodePopup"></phoneCode>
    </div>
  </page-meta>
</template>

<script>
import selectAddressPopup from "@/pages2/components/popup/selectAddressPopup.vue";
import selectCityPopup from "@/pages2/components/popup/selectCityPopup.vue";
import selectJobPopup from "@/pages2/components/popup/selectJobPopup.vue";
import phoneCode from "@/pages2/components/popup/phoneCode.vue";
import xlCell from "@/pages2/components/common/xlCell.vue";
import { mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "postOffer",
  components: {
    selectCityPopup,
    selectJobPopup,
    phoneCode,
    xlCell,
    selectAddressPopup,
  },
  props: {},
  data() {
    return {
      fontsize: "",
      isEdig: false,
      form: {
        picture_url: [],
        phone: "", //联系电话
        content: "", //需求描述
        name: "",
      },
      picture_url: [],
      jobActiveList: [],
      id: "",
      issueAddPopup: false,
      issueEditPopup: false,
      verifyPhone: false,
      showCityPopup: false,
      showJobPopup: false,
      showCodePopup: false,
      showselectAddressPopup: false,
      wantJobCityList: [], //求职城市列表
      wantJobList: [], //求职城市列表
      xuqiuMaxTextNum: 500, //需求描述文字最大限制
      xuqiuMinTextNum: 5, //需求描述文字最小限制
      isFabu: false,
      address: {
        province: { fullname: "" },
      },
      fileList: [],
      isShare: 0,
      isTop: false,
      postParams: {
        positions: "", //招聘岗位(标签) 多个，逗号分割
        longitude: null, //经度
        latitude: null, //经度
        address: "", //工作地址
        contact: "", //联系电话
        description: "", //需求描述
        photo_urls: "", //展示图URL,多个逗号分割
        first_area_id: 0, //地区一级ID
        second_area_id: 0, //地区二级ID
        third_area_id: 0, //地区三级ID
        four_area_id: 0, //地区三级ID
        four_area_des: "", //地区三级ID
        first_area_des: "",
        second_area_des: "",
        third_area_des: "",
      },
    };
  },
  computed: {
    ...mapGetters("user", ["getUserInfo"]),
    ...mapGetters("location", ["getUserLocationInfo"]),
    addressText() {
      let text = "";
      console.log(177, this.getUserLocationInfo);
      if (this.address) {
        if (this.address.province && this.address.province.fullname) {
          text += this.address.province.fullname;
        } else if (this.getUserLocationInfo) {
          this.postParams.first_area_des = this.getUserLocationInfo.ad_info.province;
          this.postParams.first_area_id = JSON.parse(this.getUserLocationInfo.ad_info.adcode.slice(0, 2) + "0000");
          this.postParams.second_area_id = JSON.parse(this.getUserLocationInfo.ad_info.city_code.slice(3));
          this.postParams.second_area_des = this.getUserLocationInfo.ad_info.city;
          this.postParams.third_area_id = JSON.parse(this.getUserLocationInfo.ad_info.adcode);
          this.postParams.third_area_des = this.getUserLocationInfo.ad_info.district;
          this.postParams.four_area_des = this.getUserLocationInfo.address_reference.town.title;
          this.postParams.four_area_id = JSON.parse(this.getUserLocationInfo.address_reference.town.id);
          // this.address.province.fullname = res.job.address;
          // text = this.getUserLocationInfo.address;
          text =
            this.getUserLocationInfo.ad_info.province +
            this.getUserLocationInfo.ad_info.city +
            this.getUserLocationInfo.ad_info.district +
            this.getUserLocationInfo.address_reference.town.title;
        } else {
          if (this.getUserLocationInfo) {
            this.postParams.first_area_des = this.getUserLocationInfo.ad_info.province;
            this.postParams.first_area_id = JSON.parse(this.getUserLocationInfo.ad_info.adcode.slice(0, 2) + "0000");
            this.postParams.second_area_id = JSON.parse(this.getUserLocationInfo.ad_info.city_code.slice(3));
            this.postParams.second_area_des = this.getUserLocationInfo.ad_info.city;
            this.postParams.third_area_id = JSON.parse(this.getUserLocationInfo.ad_info.adcode);
            this.postParams.third_area_des = this.getUserLocationInfo.ad_info.district;
            this.postParams.four_area_des = this.getUserLocationInfo.address_reference.town.title;
            this.postParams.four_area_id = JSON.parse(this.getUserLocationInfo.address_reference.town.id);
            // text = this.getUserLocationInfo.address;
          } else {
            text += "选择城市";
          }
        }
        if (this.address.city) {
          text += this.address.city.fullname;
        }
        if (this.address.county) {
          text += this.address.county.fullname;
        }
        if (this.address.street) {
          text += this.address.street.fullname;
        }
      } else {
        text = "选择城市";
      }
      return text;
    },
  },
  methods: {
    ...mapMutations("location", ["setSelectCity", "setUserLocationInfo"]),
    ...mapMutations(["setJobIntention"]),
    ...mapActions("user", ["setStatus"]),
    customJump() {
      console.log("返回啦");
      uni.navigateBack(2);
    },
    async getDetail(id) {
      this.$throttle(async () => {
        let res = await this.$http.requestSync("/jobs/info/" + id, {}, "GET");
        // let res = await this.$http.requestSync("/jobs/info/45", {}, "GET");
        this.data = res.job;
        this.postParams.description = res.job.description;
        this.postParams.positions = res.job.positions;
        this.postParams.longitude = res.job.longitude;
        this.postParams.latitude = res.job.latitude;
        this.postParams.first_area_des = res.job.first_area_des;
        this.postParams.first_area_id = res.job.first_area_id;
        this.postParams.second_area_id = res.job.second_area_id;
        this.postParams.second_area_des = res.job.second_area_des;
        this.postParams.third_area_id = res.job.third_area_id;
        this.postParams.third_area_des = res.job.third_area_des;
        this.address.province.fullname = res.job.address;
        this.postParams.four_area_des = res.job.four_area_des;
        this.postParams.four_area_id = res.job.four_area_id;
        this.isTop = res.job.is_buy_top;
        res.job.positions.split(",").forEach(item => {
          this.jobActiveList.push({
            name: item,
          });
        });

        // this.addressText = res.job.address;
        this.postParams.contact = res.job.contact;
        if (res.job.positions) {
          res.job.positions.split(",").forEach(item => {
            this.wantJobList.push({
              name: item,
            });
          });
        }
        if (res.job.photo_urls) {
          if (res.job.photo_urls.indexOf(",") > -1) {
            this.picture_url = res.job.photo_urls.split(",");
            this.fileList = res.job.photo_urls.split(",");
          } else {
            this.picture_url = [res.job.photo_urls];
            this.fileList = [res.job.photo_urls];
          }
        }
        this.isOk();
      });
    },
    async getTemplate() {
      this.$throttle(async () => {
        if (this.wantJobList.length > 0) {
          let arr = [];
          this.wantJobList.forEach(item => {
            arr.push(item.name);
          });
          this.postParams.positions = arr.join(",");
        }
        let params = {
          positions: this.postParams.positions, //求职岗位
          address: this.addressText, //工作地址
        };
        let res = await this.$http.requestSync("/jobs/template", params);
        if (res.code == 200) {
          this.postParams.description = res.des;
          this.isOk();
        }
      }, 300);
    },
    tozp() {
      this.$throttle(() => {
        if (this.isTop) {
          this.$layer.message("已置顶成功，请勿重复操作");
          this.$redirectTo("/pages2/regulateJobs");
          return false;
        }
        let jobIntention = this.wantJobList.map(item => {
          return item.name;
        });
        // if (jobIntention.length > 0) {
        //   this.$setStoraged("jobIntention", "");
        //   this.$setStoraged("jobIntention", jobIntention.join(","));
        //   this.setJobIntention(jobIntention.join(","));
        // }
        this.$redirectTo("/pages2/topRecruitment", {
          id: this.id,
          from: "add",
        });
      }, 200);
    },
    toFindWork() {
      this.$throttle(() => {
        let jobIntention = this.wantJobList.map(item => {
          return item.name;
        });
        // if (jobIntention.length > 0) {
        //   this.$setStoraged("jobIntention", jobIntention.join(","));
        //   this.setJobIntention(jobIntention.join(","));
        // }
        this.$redirectTo("/pages2/findWork", {
          isPageTitleFind: 2,
        });
      }, 200);
    },
    regulateJob() {
      this.$redirectTo("/pages2/regulateJobs");
    },
    getAddress(data) {
      this.isOk();
      console.log("344", data);
      this.showselectAddressPopup = false;
      this.address = data;
      // 选择工作地址后修改经纬度
      if (data.street) {
        this.postParams.latitude = data.street.location.lat;
        this.postParams.longitude = data.street.location.lng;
        this.postParams.four_area_id = JSON.parse(data.street.id);
        this.postParams.four_area_des = data.street.fullname;
      } else if (data.county) {
        this.postParams.third_area_des = data.county.fullname;
        this.postParams.third_area_id = JSON.parse(data.county.id);
        this.postParams.latitude = data.county.location.lat;
        this.postParams.longitude = data.county.location.lng;
      } else if (data.city) {
        this.postParams.second_area_des = data.city.fullname;
        this.postParams.second_area_id = JSON.parse(data.city.id);
        this.postParams.latitude = data.city.location.lat;
        this.postParams.longitude = data.city.location.lng;
      } else {
        this.postParams.first_area_des = data.province.fullname;
        this.postParams.first_area_id = JSON.parse(data.province.first_area_id);
        this.postParams.latitude = data.province.location.lat;
        this.postParams.longitude = data.province.location.lng;
      }
      data.province && (this.postParams.first_area_id = Number(data.province.id));
      data.province && (this.postParams.first_area_des = data.province.fullname);

      data.city && (this.postParams.second_area_id = Number(data.city.id));
      data.city && (this.postParams.second_area_des = data.city.fullname);

      data.county && (this.postParams.third_area_id = Number(data.county.id));
      data.county && (this.postParams.third_area_des = data.county.fullname);
      console.log(this.postParams);
    },
    // 删除图片
    deletePic(index) {
      this.$throttle(() => {
        this.picture_url.splice(index, 1);
        this.fileList.splice(index, 1);
      }, 200);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);

      let fileListLen = this.fileList.length;
      lists.map(item => {
        this.fileList.push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        let result = await this.$http.upload(lists[i]);
        result = JSON.parse(result);
        if (result.code == 200) {
          this.picture_url.push(result.url);
          let item = this.fileList[fileListLen];
          this.fileList.splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: "success",
              message: "上传成功",
              url: result.url,
            })
          );
          fileListLen++;
        } else {
          this.$layer.message("上传失败");
        }
      }
    },
    clickRightQiuZhiJob() {
      this.$throttle(() => {
        this.showJobPopup = true;
      }, 200);
    },
    clickSelectCity() {
      // this.$refs.selectCityPopup.open();
      // this.showCityPopup = true;
      this.$throttle(() => {
        this.showselectAddressPopup = true;
      }, 200);
    },
    getSelectAddress(data) {
      console.log(data);
      this.$throttle(() => {
        this.wantJobCityList = data;
        this.showCityPopup = false;
        this.isOk();
      }, 200);
    },
    xuqiuChange(data) {
      let content = data.detail.value;
      this.isPoneAvailable(content);
      this.isOk();
    },
    isPoneAvailable(str) {
      let regExp = /1[3-9]\d{9}/g;
      str = str.trim();
      // /1[3-9]\d{9}/g.test('19947470790')
      if (regExp.test(str)) {
        //替换中间四个
        //替换所有手机号
        this.postParams.description = str.replaceAll(/(\.*)\d{11}(.*)/g, "$1****$2");
        // this.postParams.description = str.replace(/(d{3})d{4}(d{4})/, "$1****$2");
        this.$layer.message("需求描述中请勿输入手机号等敏感信息");
      } else {
        console.log("不包含手机号");
      }
    },
    submitJob(data) {
      this.$throttle(() => {
        this.wantJobList = data;
        this.showJobPopup = false;
        this.isOk();
      }, 500);
    },
    deleteTagJob(index) {
      this.$throttle(() => {
        this.wantJobList.splice(index, 1);
      }, 200);
    },
    async submit() {
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          if (this.wantJobList.length <= 0) {
            this.$layer.message("请选择招聘岗位");
            return false;
          }
          if (!this.addressText) {
            this.$layer.message("请选择工作地址");
            return false;
          }
          if (!this.postParams.contact) {
            this.$layer.message("请输入您的联系电话");
            return false;
          }
          let regExp = /1[3-9]\d{9}/g;
          if (!regExp.test(this.postParams.contact)) {
            this.$layer.message("请输入正确的手机号码");
            return false;
          }
          // if (!this.verifyPhone) {
          //   this.$layer.message("请校验联系电话的合法性");
          //   return false;
          // }
          if (!this.postParams.description) {
            this.$layer.message("请输入需求描述");
            return false;
          }
          if (this.postParams.description.split("").length < this.xuqiuMinTextNum) {
            this.$layer.message("需求描述请输入最少" + this.xuqiuMinTextNum + "个文字");
            return false;
          }

          this.postParams.address = this.addressText;
          if (this.wantJobList.length > 0) {
            let arr = [];
            this.wantJobList.forEach(item => {
              arr.push(item.name);
            });
            this.postParams.positions = arr.join(",");
          }
          if (this.picture_url.length > 0) {
            this.postParams.photo_urls = this.picture_url.join(",");
          }
          if (!this.address.city) {
            this.$setStoraged("userSelectCity", [
              {
                fullname: this.getUserLocationInfo.ad_info.city,
                name: this.getUserLocationInfo.ad_info.city,
                id: this.getUserLocationInfo.ad_info.city_code.slice(3),
              },
            ]);
            this.setSelectCity([
              {
                fullname: this.getUserLocationInfo.ad_info.city,
                name: this.getUserLocationInfo.ad_info.city,
                id: this.getUserLocationInfo.ad_info.city_code.slice(3),
              },
            ]);
          } else {
            if (
              this.address.province.fullname == "北京市" ||
              this.address.province.fullname == "重庆市" ||
              this.address.province.fullname == "天津市" ||
              this.address.province.fullname == "上海市"
            ) {
              if (this.address.city) {
                this.$setStoraged("userSelectCity", [this.address.province]);
                this.setSelectCity([this.address.province]);
              }
            } else {
              if (this.address.city) {
                this.$setStoraged("userSelectCity", [this.address.city]);
                this.setSelectCity([this.address.city]);
              }
            }
          }
          console.log("this.address:", this.address);
          if (this.address.street || this.address.county || this.address.city || this.address.province.id) {
            if (this.address.street) {
              this.postParams.latitude = this.address.street.location.lat;
              this.postParams.longitude = this.address.street.location.lng;
            } else if (this.address.county) {
              this.postParams.latitude = this.address.county.location.lat;
              this.postParams.longitude = this.address.county.location.lng;
            } else if (this.address.city) {
              this.postParams.latitude = this.address.city.location.lat;
              this.postParams.longitude = this.address.city.location.lng;
            } else if (this.address.province) {
              this.postParams.latitude = this.address.province.location.lat;
              this.postParams.longitude = this.address.province.location.lng;
            }
          } else {
            if (this.getUserLocationInfo) {
              this.postParams.latitude = this.getUserLocationInfo.location.lat;
              this.postParams.longitude = this.getUserLocationInfo.location.lng;
            }
          }
          let res = await this.$http.requestSync(this.isEdig ? "/jobs/update" : "/jobs/create", this.postParams);
          if (res.code == 200) {
            this.id = res.job.id;
            if (this.isEdig) {
              this.issueEditPopup = true;
            } else {
              this.issueAddPopup = true;
            }
            this.setStatus();
          } else {
            this.$layer.message(res.message);
            setTimeout(_ => {
              this.regulateJob();
            }, 1000);
          }
        });
      });
    },
    changePhone() {
      if (!this.verifyPhone) {
        let regExp = new RegExp("^1[3578]\\d{9}$");
        console.log(this.postParams.contact);
        if (regExp.test(this.postParams.contact)) {
          this.showCodePopup = true;
          this.$throttle(() => {
            if (this.$refs.phoneCode) {
              this.$refs.phoneCode.getCode("create");
            }
          }, 1500);
          this.isOk();
        } else {
          this.$layer.message("请输入正确的手机号码");
        }
      }
      if (this.$getStoraged("phone").length) {
        if (this.$getStoraged("phone") != this.form.phone) {
          this.verifyPhone = false;
        }
      }
    },
    cancelCodePopup() {
      this.$throttle(() => {
        this.showCodePopup = false;
      });
    },
    codeSuccess() {
      this.$throttle(() => {
        this.showCodePopup = false;
        this.verifyPhone = true;
        this.isOk();
      });
    },
    isOk() {
      if (this.postParams.description.split("").length >= this.xuqiuMinTextNum && this.postParams.contact && this.addressText && this.wantJobList.length > 0) {
        this.isFabu = true;
      } else {
        this.isFabu = false;
      }
    },
    async getLocation() {
      let res = await this.$getLocationPromise();
      if (res) {
        let res2 = await this.$http.request(
          "https://apis.map.qq.com/ws/geocoder/v1/?key=6KJBZ-ZB2W4-NXNUB-DT7KO-E4KMJ-7KB5L&location=" + res.latitude + "," + res.longitude,
          "GET",
          {},
          data => {
            this.$setStoraged("userLocationInfo", data.result);
            this.setSelectCity([
              {
                fullname: data.result.ad_info.province,
                name: data.result.ad_info.province,
                id: data.result.ad_info.adcode.slice(0, 2) + "0000",
              },
            ]);
            uni.setStorageSync("userSelectCity", [
              {
                fullname: data.result.ad_info.province,
                name: data.result.ad_info.province,
                id: data.result.ad_info.adcode.slice(0, 2) + "0000",
              },
            ]);

            this.postParams.first_area_des = data.result.ad_info.province;
            this.postParams.first_area_id = JSON.parse(data.result.ad_info.adcode.slice(0, 2) + "0000");
            this.postParams.second_area_id = JSON.parse(data.result.ad_info.city_code.slice(3));
            this.postParams.second_area_des = data.result.ad_info.city;
            this.postParams.third_area_id = JSON.parse(data.result.ad_info.adcode);
            this.postParams.third_area_des = data.result.ad_info.district;
            this.postParams.four_area_des = data.result.address_reference.town.title;
            this.postParams.four_area_id = JSON.parse(data.result.address_reference.town.id);
            console.log(641, this.postParams);
            this.setUserLocationInfo(data.result); //保存用户位置信息到vuex中，方便在选择地址时直接选择
            this.$forceUpdate();
          }
        );
      }
    },
  },
  watch: {
    wantJobCityList: {
      handler(n, o) {
        console.log(n);
      },
      deep: true,
    },
    form: {
      handler(n, o) {
        this.isOk();
      },
      deep: true,
    },
  },
  created() {
    if (!this.getUserLocationInfo) {
      this.getLocation();
    }
  },
  // 页面周期函数--监听页面加载
  onLoad(options) {
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", JSON.parse(params.shareUserId));
        this.isShare = 1;
      }
    }
    if (options.phone) {
      this.postParams.contact = options.phone;
      this.verifyPhone = true;
    } else {
      if (this.getUserInfo) {
        this.postParams.contact = this.getUserInfo.phone;
        this.verifyPhone = true;
      }
    }
    if (options.id) {
      this.id = options.id;
      // this.getDetail(options.id);
      this.showJobPopup = false;
      this.isEdig = true;
      this.postParams.id = JSON.parse(options.id);
    } else {
      this.showJobPopup = true;
      this.isEdig = false;
      console.log("590", this.getUserLocationInfo);
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize(res => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize = Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize = Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      },
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
    if (this.id) {
      this.getDetail(this.id);
    }
  },
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.postOffer {
  background: #f7f7f7;
  .container {
    .form_item {
      box-sizing: border-box;
      padding: 17px 10px 8px;
      margin: 10px auto;
      background: #fff !important;
      border-radius: 10px;
      font-size: 15px;
      align-items: center;
      .form-item-right-qiuzhi {
        display: flex;
        justify-content: flex-end;
        width: 150px;
        height: 100%;
        color: #bfbfbf;
        margin-right: 3px;
        @include ell();
      }
      .form-item-bottom-qiuzhi {
        display: flex;
        flex-wrap: wrap;
        .tag {
          position: relative;
          box-sizing: border-box;
          padding: 6px 10px;
          background: #ffedde;
          border-radius: 4px 4px 4px 4px;
          margin: 10px 10px 0 0;
          color: #ff8822;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          .iconfont {
            position: absolute;
            top: -15%;
            right: -7px;
            font-size: 14px;
          }
        }
      }
      .form-item-right-city {
        font-size: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .form-item-right-btn {
        width: 76px;
        height: 27px;
        background: #ff8822;
        border-radius: 14px 14px 14px 14px;
        opacity: 1;
        font-size: 12px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        line-height: 27px;
      }
      .form-item-right-desc {
        position: relative;

        #xuqiuTextArea {
          background: #fafafa;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          border: 1px solid #e8e8e8;
          min-height: 101px;
          width: 100%;
          box-sizing: border-box;
          padding: 10px;
          font-size: 14px;
          padding-bottom: 20px;
        }
        .text {
          position: absolute;
          right: 10px;
          bottom: 5px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #bfbfbf;
        }
      }
      .form-item-right-upload {
        .title2 {
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }

      #userName {
        text-align: right;
      }
    }
    .form-bottom {
      margin-bottom: 20px !important;
    }
  }
  .issuePopup {
    height: 344px;
    width: 257px;
    background: url("@/pages2/static/images/4.png");
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0px auto 0;

    .title {
      font-size: 15px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ff8822;
      width: 139px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background: #ffeedf;
      border-radius: 0px 0px 14px 14px;
      margin: 12px auto 0;
      display: flex;
      align-items: center;
      .iconfont {
        width: 16px;
        height: 16px;
        background: url("@/pages2/static/images/5.png");
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        margin-left: 31px;
        margin-right: 2px;
      }
    }
    .h1 {
      font-size: 15px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      width: 100%;
      text-align: center;
      margin: 10px auto 12px;
    }
    .st {
      width: 225px;
      margin: 12px auto;
      padding-left: 8px;
      box-sizing: border-box;
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .jjqz {
      width: 175px;
      height: 40px;
      background: linear-gradient(270deg, #ffa222 0%, #ff8822 100%);
      border-radius: 20px 20px 20px 20px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 40px;
      margin: 12px auto 10px;
    }
    .desc {
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      text-align: center;
    }
    .ckgw {
      width: 175px;
      height: 40px;
      border-radius: 20px 20px 20px 20px;
      opacity: 1;
      border: 1px solid #ff8822;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ff8822;
      line-height: 40px;
      margin: 12px auto;
      text-align: center;
    }

    &.issueEditPopup {
      height: 280px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .image {
        margin-top: 25px;
        width: 100px;
        height: 24px;
      }
      .name {
        margin-top: 8px;
        line-height: 20px;
        color: #999999;
        font-size: 14px;
      }
      .icon {
        margin-top: 15px;
        width: 170px;
        height: 96px;
      }
      .jjqz {
        margin-top: 20px;
        height: 40px;
      }
    }
  }
  .close {
    width: 23px;
    height: 23px;
    margin: 0 auto;
  }
  .image_list {
    display: flex;
    .item {
      width: 74px;
      height: 74px;
      border-radius: 8px;
      margin: 10px 10px 15px auto;
      overflow: hidden;
      position: relative;
      image {
        width: 100%;
        height: 100%;
      }
      .deletePic {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 20px;
        height: 20px;
        background: #00000039;
        border-bottom-left-radius: 100px;

        .iconfont {
          position: absolute;
          top: 3px;
          right: 3px;
          font-size: 10px;
          text-align: right;
        }
      }
    }
  }
  /deep/.u-upload {
    margin: 10px auto 15px;
    .u-upload__deletable {
      width: 20px;
      height: 20px;
    }
  }
  /deep/ .u-upload__deletable {
    width: 20px;
    height: 20px;
    .u-upload__deletable__icon {
      transform: scale(1);
      top: 5px;
      .u-icon {
        .u-icon__icon {
          font-size: 14px !important;
        }
      }
    }
  }
  .btn_wrap {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
    padding-bottom: 10px;
    background: #f7f7f7;
    .text {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      width: 100%;
      box-sizing: border-box;
      padding: 13px 40px 11px 40px;
      line-height: 16px;
      .s1 {
      }
      .s2 {
        color: #ff8822;
      }
    }
    .submit {
      width: 300px;
      height: 42px;
      background: #fbbf8c;
      border-radius: 21px 21px 21px 21px;
      font-size: 16px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      text-align: center;
      line-height: 42px;
      margin: 0 auto;
    }
    .isLight {
      background: #ff8822;
    }
  }
}
</style>
